<template>
  <div class="bindBank">
    <ComNavBar :title="t('Bank Information')" />

    <div class="container">
      <div class="bank-list-container">
        <div class="add-bank-container" v-for="(item, index) in bankList" :key="item.id">
          <div class="bank-list-id">
            <div class="card-info"><img src="@/assets/images/bank_status.svg" alt="" srcset="" class="bank-icon">
              <div class="card">
                <p class="name">{{t('Bank Account Number')}}</p>
                <p class="data">{{ item.code }}</p>
              </div>
            </div>
            <p class="del" @click="handleDel(item.id)">{{t('Delete')}}</p>
          </div>
          <div class="bank-list-content">
            <div class="bank-list-content-name">{{t('Name')}}</div>
            <div class="bank-list-content-value">{{ item.name }}</div>
          </div>
          <div class="bank-list-content">
            <div class="bank-list-content-name">{{t('Mobile Number')}}</div>
            <div class="bank-list-content-value">{{ item.phone }}</div>
          </div>
          <div class="bank-list-content">
            <div class="bank-list-content-name">{{t('IFSC Code')}}</div>
            <div class="bank-list-content-value">{{ item.ifsc }}</div>
          </div>
        </div>
      </div>

      <div v-if="!loading" class="add_bank" @click="handleFunc">{{t('Add')}}</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { showDialog, showSuccessToast, showLoadingToast, closeToast } from 'vant'
import { ref } from 'vue'
import { get, del } from '@/utils/request'
import { t } from '@/languages'
const $router = useRouter()

function handleFunc() {
  $router.push({
    path: '/mine/addBank'
  })
}

const bankList = ref([])
const loading = ref(true)

async function queryList() {
  showLoadingToast({ duration: 0 })

  try {
    const res = await get(`/api/app/banks/`, {})

    console.log(res)

    bankList.value = res

  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
    loading.value = false
  }
}

function handleDel(id) {
  showDialog({
    title: t('Title'),
    message: t('Do you want to delete it ?'),
    showCancelButton: true,
    confirmButtonText: t('Confirm'),
    cancelButtonText: t('Cancel'),
    confirmButtonColor: '#07c160'
  }).then(async() => {
    // on close

    const res = await del(`/api/app/bank/${id}/`, {})

    showSuccessToast(t('Delete success'))

    queryList()
  })
}

queryList()
</script>
<style lang="scss" scoped>
.container {
  padding: .53333rem .66667rem;
}

.bindBank .container .bank-list-container {
  margin-top: .26667rem;
}

.bindBank .container .add-bank-container {
  color: #0d111a;
  padding: .4rem;
  margin-top: .4rem;
  height: 4.69333rem;
  border-radius: .21333rem;
  background: url(@/assets/images/bank_card_bg.png);
  background-size: 100% 100%;
}

.bindBank .container .bank-list-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39px;
}

.bindBank .container .bank-list-id .card-info {
  display: flex;
  align-items: center;
}

.bindBank .container .bank-list-id .bank-icon {
  width: .93333rem;
  height: .93333rem;
  margin-right: .26667rem;
}

.bindBank .container .bank-list-id .card {
  font-size: .42667rem;
  color: #0d111a;
}

.bindBank .container .bank-list-id .card .name {
  font-weight: 600;
  margin-bottom: .08rem;
}

.bindBank .container .bank-list-id .card .data {
  font-size: .42667rem;
}

.bindBank .container .bank-list-id .del {
  color: #0d111a;
  padding: .10667rem .21333rem;
  border-radius: .16rem;
  background: #fae56c;
}

.bindBank .container .bank-list-container .bank-list-content {
  display: flex;
  align-items: center;
  margin-top: .34667rem;
}

.bindBank .container .bank-list-container .bank-list-content .bank-list-content-name {
  margin-left: .26667rem;
  flex-shrink: 0;
  width: 2.26667rem;
  text-align: start;
  font-weight: 600;
  word-break: break-word;
}

.bindBank .container .bank-list-container .bank-list-content .bank-list-content-value {
  padding-left: .42667rem;
  padding-right: .26667rem;
}

.bindBank .container .add_bank {
  background: linear-gradient(270deg, #62f792, #63fddb);
  color: #0d111a;
  font-weight: 600;
  font-size: .37333rem;
  text-align: center;
  border-radius: .66667rem;
  height: .93333rem;
  line-height: .93333rem;
  margin: 0 .93333rem;
  margin-top: .66667rem;
}
</style>
